<template>
  <div>
    <!-- 搜索框 -->
    <el-card id="search">
      <el-row>
        <el-col :span="4">
          <el-select
            style="width: 80%"
            clearable
            v-model="searchModel.roleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="searchModel.account"
            placeholder="账号"
            clearable=""
          ></el-input>
        </el-col>
        <el-button
          @click="getUserList"
          type="primary"
          round
          icon="el-icon-search"
        >查询</el-button
        >
      </el-row>
    </el-card>
    <!-- 结果表格 -->
    <el-card>
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column label="#" width="80">
          <template slot-scope="scope">
            <!-- (pageNo - 1) * pageSize + index + 1 -->
            {{
              (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="用户ID" width="180" align="center">
        </el-table-column>
        <el-table-column prop="account" label="账号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="identityCard" label="身份证号" width="200" align="center"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="120" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.sex == 0">男</el-tag>
            <el-tag type="danger" v-if="scope.row.sex == 1">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180" align="center">
        </el-table-column>
        <el-table-column prop="userRole" label="角色" width="180" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.userRole == 0">摊主</el-tag>
            <el-tag type="danger" v-if="scope.row.userRole == 1">租户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="goodsImage" label="头像" width="120" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="downloadImageUrl + scope.row.avatar"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import userApi from "@/api/wxUserManage";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系电话不能为空"));
      }
      let isPhone = new RegExp("^1[34578][0-90{9}$]", "i");
      if (!isPhone.test(value)) {
        return callback(new Error("手机格式错误"));
      }
      callback();
    };
    var checkEmail = (rule, value, callback) => {
      var reg =
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (!reg.test(value)) {
        return callback(new Error("邮件格式错误"));
      }
      callback();
    };
    return {
      roleId: '',
      imageUrl: '',
      uploadUrl: 'http://localhost:8080/common/upload',
      downloadImageUrl: 'http://localhost:8080/common/download?name=',
      roleList: [
        {
          roleId: 0,
          roleName: '摊主'
        },
        {
          roleId: 1,
          roleName: '租户'
        }
      ],
      formLabelWidth: "130px",
      userForm: {},
      dialogFormVisible: false,
      title: "",
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      userList: [],
    };
  },
  methods: {
    // getRoleId(roleId){
    //   this.userForm.userRole = roleId
    // },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式或者是PNG!')
      }

      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleImageSuccess(response, file) {
      this.imageUrl =
        'http://localhost:8080/common/download?name=' + response.data
      this.userForm.avatar = response.data
      console.log('上传的头像:',this.userForm.avatar)
    },
    clearForm() {
      this.userForm = {};
      this.$refs.userFormRef.clearValidate();
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getUserList();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getUserList();
    },
    getUserList() {
      console.log(this.searchModel)
      userApi.getUserList(this.searchModel).then((response) => {
        this.userList = response.data.rows;
        this.total = response.data.total;
      });
    },
  },
  created() {
    this.getUserList();
  },
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}
.el-dialog .el-input {
  width: 35%;
}
</style>
